<template>
  <common-card 
    title="累计用户数"
    value="1,087,503"
  >
    <template>
      <v-chart :options="getOptions()" />
    </template>
    <template #footer>
      <div class="total-users-footer">
        <span>日同比</span>
        <span class="emphasis">8.73%</span>
        <div class="increase"></div>
        <span class="month">月同比</span>
        <span class="emphasis">35.91%</span>
        <div class="decrease"></div>
      </div>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from "@/mixins/commonCardMixin.js"
export default {
  mixins: [commonCardMixin],
  methods: {
    getOptions() {
      return {
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false
        },
        series: [ // 不管在画布上绘制什么图形，都是在系列里进行的
          {
            type: "bar",
            stack: '总量', //stack相同可以让相同系列的数据进行合并
            data: [200],
            barWidth: 10, //合并后的图表只要写一个barWidth就行
            itemStyle: {
              color: "#45c946"
            }
          },{
            type: "bar",
            stack: '总量',
            data: [250],
            itemStyle: {
              color: "#eee"
            }
          },{
            type: 'custom', //自定义系列
            data: [200],
            stack: "总量",
            renderItem: (params, api) => {
              //通过renderItem进行绘制
              const value = api.value(0);//获取data的第一号元素
              const endPoint = api.coord([value], 0); //coord自动计算 x=200,y=0的坐标是什么
              console.log(endPoint)
              return { //return我们需要绘制的图
                position: endPoint, //绘图的坐标系
                type: "group", // 将图形变成一个分组
                children: [
                  {
                    type: 'path', // 线段，这个path指定后我们可以使用svg
                    shape: {
                      d: 'M753.664 616.448l-209.92-264.192c-16.896-21.504-49.664-21.504-67.072 0l-209.92 264.192c-22.528 28.16-2.56 69.632 33.28 69.632h420.352c35.84 0 55.808-41.472 33.28-69.632z', //svg图像的内容
                      x: -5, // x轴偏移量
                      y: 10, // y轴偏移量
                      width: 10, //宽
                      height: 10, //高
                      layout: 'cover'
                    },
                    style: {
                      fill: '#45c946', //填充色
                    }
                  },{
                    type: 'path', // 线段，这个path指定后我们可以使用svg
                    shape: {
                      d: 'M763.904 407.552l-209.92 264.192c-16.896 21.504-49.664 21.504-67.072 0L276.48 407.552c-22.016-28.16-2.048-69.632 33.792-69.632h420.352c35.84 0 55.808 41.472 33.28 69.632z', //svg图像的内容
                      x: -5, // x轴偏移量
                      y: -20, // y轴偏移量
                      width: 10, //宽
                      height: 10, //高
                      layout: 'cover'
                    },
                    style: {
                      fill: '#45c946', //填充色
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.total-users-footer{
  display: flex;
  align-items: center;
  .month{
    margin-left: 10px;
  }
}
</style>
